<template>
  <div class="container">
    <div class="content">
      <p class="title">
        {{ head[head_sel].title }}
        <span class="nums" v-if="head_sel == 0">{{
          t("银行卡数量", { num: card_list.length })
        }}</span>
        <el-button
          class="manager-btn"
          @click="delete_action_click()"
          type="text"
        >
          {{ card_delete ? $t("公共.完成") : $t("公共.管理") }}
        </el-button>
      </p>
      <div class="router">
        <bankCardList
          class="router"
          :card_list="card_list"
          :card_delete="card_delete"
          v-if="head_sel == 0"
          @addClick="add_card_click()"
          @cardEdit="card_edit_clcik($event)"
          @cardDelete="add_success()"
        >
        </bankCardList>
        <bankCardAdd
          v-if="head_sel == 1"
          :card_item="card_item"
          @addSuccess="add_success()"
        ></bankCardAdd>
      </div>
    </div>
  </div>
</template>
<script>
import bankCardList from "@/components/bankCardList.vue";
import bankCardAdd from "@/components/bankCardAdd.vue";
import { getBankCardList } from "@/utils/api.js";
export default {
  components: {
    bankCardList,
    bankCardAdd,
  },
  data() {
    return {
      card_list: [],
      head_sel: 0,
      card_item: null,
      card_delete: false,
    };
  },
  computed: {
    head() {
      return [
        {
          title: this.t("我的银行卡"),
        },
        {
          title: this.t("添加银行卡"),
        },
      ];
    },
  },
  mounted() {
    this.get_bankcard_list();
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     * @param {Object} opt 其他参数
     */
    t(v, opt) {
      if (opt) {
        return this.$t(`我的银行卡.${v}`, opt);
      }
      return this.$t(`我的银行卡.${v}`);
    },
    get_bankcard_list() {
      getBankCardList().then((res) => {
        if (res.code == 1) {
          console.log("银行卡列表------=-=-=", res.data);
          this.card_list = res.data;
          this.head_sel = 0;
        }
      });
    },
    add_card_click() {
      this.head_sel = 1;
    },
    card_edit_clcik(item) {
      this.card_item = item;
      this.head_sel = 1;
    },
    add_success() {
      this.get_bankcard_list();
      this.head_sel = 0;
    },
    delete_action_click() {
      this.card_delete = !this.card_delete;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  background: #f9f9f9;

  .content {
    margin: 0px 110px;
    padding: 30px;
    height: calc(100vh - 90px);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .title {
      color: #000;
      font-size: 20px;
      font-weight: bold;

      .nums {
        margin-left: 20px;
        color: #999;
        font-size: 16px;
      }

      .manager-btn {
        float: right;
        color: #666666;
      }
    }

    .router {
      margin-top: 30px;
    }
  }
}
</style>
